<template>
  <div class="home-page">
    <!-- <h2>官网公共组件</h2> -->
    <div>
      <!-- <h3>导航</h3> -->
      <skyMenu :menuList="menuList" :defaultActive="defaultActive">
        <div slot="logo">
          <img
            width="80"
            src="https://media.giphy.com/media/gilJSOsqBUh5S/giphy.gif"
            alt=""
          />
        </div>
      </skyMenu>

      <!-- <h3>轮播</h3> -->
      <skySwiper :bannerList="bannerList" />

      <div class="padding-lr100">
        <h3>新闻列表</h3>
        <skyNewsList v-for="item in list" :newsItem="item" :key="item.title" />
      </div>
      <div class="padding-lr100">
        <skyNewsListCard
          v-for="item in list"
          :newsItem="item"
          :key="item.title"
        />
      </div>
      <!-- 时间轴 -->

      <skyTimeline :activities="activities" />

      <!-- 底部 -->
      <skyFooter :footerData="footerData">
        <div
          slot="footerItem"
          v-for="(footer, index) in footerData.menuList"
          :key="index"
          style="margin-right: 20px"
        >
          <h3>{{ footer.name }}</h3>
          <div v-for="(f, i) in footer.children" :key="i">{{ f.name }}</div>
        </div>
        <div slot="right" style="margin-top: 30px">
          <img
            width="100"
            src="https://img.zcool.cn/community/015cd358fac8b6a8012160f7331805.gif"
            alt=""
          />
        </div>
      </skyFooter>
    </div>
  </div>
</template>

<script>
export default {
  name: "home-view",
  data() {
    return {
      defaultActive: 0,
      menuList: [
        {
          name: "首页",
          path: "/home",
        },
        {
          name: "主要产品",
          path: "/about",
        },
        {
          name: "新闻动态",
          path: "/about",
        },
        {
          name: "关于我们",
          path: "",
          children: [
            {
              name: "联系我们",
              path: "/about",
            },
          ],
        },
      ],
      bannerList: [
        {
          url: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzwyIfwC7AA_V7tGgZI8AALJRAE7kHsAD9YG163.jpg",
        },
        {
          url: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzwyIfwC7AA_V7tGgZI8AALJRAE7kHsAD9YG163.jpg",
        },
      ],
      list: [
        {
          title: "这是标题1",
          describe:
            "钟南山院士谈奥密克戎# 传染性极强，致病率减弱 中华医学会呼吸病学年会-2022（第二十三次全国呼吸病学学术会议）于12月8——11日在线上召开。12月8日晚，钟南山院士在开幕式上",
          time: "2022-12-09",
          cover:
            "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzwyIfwC7AA_V7tGgZI8AALJRAE7kHsAD9YG163.jpg",
          files: [
            {
              name: "这是附件1",
              url: "",
            },
          ],
        },
        {
          title: "这是标题2",
          cover:
            "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzwyIfwC7AA_V7tGgZI8AALJRAE7kHsAD9YG163.jpg",
          describe:
            "钟南山院士谈奥密克戎# 传染性极强，致病率减弱 中华医学会呼吸病学年会-2022（第二十三次全国呼吸病学学术会议）于12月8——11日在线上召开。12月8日晚，钟南山院士在开幕式上",
          time: "2022-12-09",
          files: [
            {
              name: "这是附件1",
              url: "",
            },
          ],
        },
        {
          title: "这是标题3",
          cover:
            "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzwyIfwC7AA_V7tGgZI8AALJRAE7kHsAD9YG163.jpg",
          describe:
            "钟南山院士谈奥密克戎# 传染性极强，致病率减弱 中华医学会呼吸病学年会-2022（第二十三次全国呼吸病学学术会议）于12月8——11日在线上召开。12月8日晚，钟南山院士在开幕式上",
          time: "2022-12-09",
          files: [
            {
              name: "这是附件1",
              url: "",
            },
          ],
        },
        {
          title: "这是标题4",
          cover:
            "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzwyIfwC7AA_V7tGgZI8AALJRAE7kHsAD9YG163.jpg",
          describe:
            "钟南山院士谈奥密克戎# 传染性极强，致病率减弱 中华医学会呼吸病学年会-2022（第二十三次全国呼吸病学学术会议）于12月8——11日在线上召开。12月8日晚，钟南山院士在开幕式上",
          time: "2022-12-09",
          files: [
            {
              name: "这是附件1",
              url: "",
            },
          ],
        },
        {
          title: "这是标题5",
          cover:
            "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/09/ChMkJ1bKzwyIfwC7AA_V7tGgZI8AALJRAE7kHsAD9YG163.jpg",
          describe:
            "钟南山院士谈奥密克戎# 传染性极强，致病率减弱 中华医学会呼吸病学年会-2022（第二十三次全国呼吸病学学术会议）于12月8——11日在线上召开。12月8日晚，钟南山院士在开幕式上",
          time: "2022-12-09",
          files: [
            {
              name: "这是附件1",
              url: "",
            },
          ],
        },
      ],

      footerData: {
        address: "江苏省连云港市花果山大道17号 科技创业城2号楼17F，222006",
        phone: "0518-85509509",
        fax: "0518-85523376",
        friendList: [{ name: "百度一下", url: "www.baidu.com" }],
        menuList: [
          {
            name: "关于我们",
            path: "",
            children: [
              {
                name: "联系我们",
                path: "/about",
              },
              {
                name: "招贤纳士",
                path: "/about",
              },
            ],
          },
          {
            name: "关于我们2",
            path: "",
            children: [
              {
                name: "联系我们",
                path: "/about",
              },
              {
                name: "招贤纳士",
                path: "/about",
              },
            ],
          },
        ],
      },
      activities: [
        {
          content:
            "推动经济高质量发展，也要继续实现“量”的合理增长。当前我国经济发展仍需保持合理的增长速度，只有把经济发展的蛋糕做大，才能在当前形势下保持经济平稳运行，维护社会大局稳定。",
          timestamp: "2018-04-22 20:46",
          color: "#fff",
          backgroundColor: "#f7dc6f",
        },
        {
          content:
            "深化供给侧结构性改革是实现高质量发展的必由之路，是贯穿经济工作全过程的主线。同时，必须大力实施扩大内需战略，应对当前总需求不足的突出矛盾。",
          timestamp: "2018-04-21 20:46",
          backgroundColor: "#48c9b0",
        },
        {
          content:
            "经济社会发展是一个相互关联的复杂系统，涵盖社会建设、民生保障、生态环保、文化建设等方方面面。对各方面政策进行统筹，相互支撑、促进，才能形成高质量发展的合力。",
          timestamp: "2018-04-20 20:46",
          backgroundColor: "#f1948a",
        },
        {
          content:
            "加快构建以国内大循环为主体、国内国际双循环相互促进的新发展格局，就是要更多依靠国内市场实现经济发展，进而塑造我国参与国际合作和竞争新优势。",
          timestamp: "2018-04-18 20:46",
          backgroundColor: "#5faee3",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.home-page {
  padding-top: 70px;
}
.padding-lr100 {
  padding: 0 100px;
  :last-child {
    margin-right: 0 !important;
  }
}
</style>